<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Collaborative Drawing</title>
	<link href="<?=base_url()?>assets/css/old_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
	var fileId = <?=$file_id?>;
	var pageId = 1;
	var lastUpdateTime = <?=$last_time?>;
</script>
<!--
<script src="<?=base_url()?>assets/js/application.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.2.min.js"></script>
<script src="<?=base_url()?>assets/js/board.kinetic.shape.js"></script>
<script src="<?=base_url()?>assets/js/user.kinetic.js"></script>
<script src="<?=base_url()?>assets/js/user.kinetic.event.js"></script>
<script defer="defer" src="<?=base_url()?>assets/js/board.main.js"></script>
<script defer="defer" src="<?=base_url()?>assets/js/creation-dialog.js"></script>
<script src="<?=bootstrap_assets()?>js/bootstrap.js"></script>
<script src="<?=bootstrap_assets()?>js/bootstrap-fileupload.js"></script>-->
<!--<script src="<?=bootstrap_assets()?>js/bootstrap-modal.js"></script>
<script src="<?=bootstrap_assets()?>css/bootstrap-fileupload.css"></script>-->
<script defer="defer">
	jQuery(document).ready(function($) {	
		$("#loading_indicator").modal({show:true});  
		controller = new ApplicationController();
		allData = new RequestAllData();
		$("#loading_indicator").hide(0);
		$("#canvas_edit").hide();
		
	});
	
	/*function saveImage()
	{		
		$("#add_image").modal('hide');  
		var imageObj = new Image();
      imageObj.onload = function() {
        drawImage(this);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
		// alert("save");
	}*/
	
</script>

<?=$creation_dialog?>

<div class="container">
	<!-- Modal Loading All Data -->
	<div id="loading_indicator" class="modal hide fade in" style="display: none; ">  
		<div class="modal-body">  
			<img src="<?=base_url()?>assets/img/ajax_loader.gif"></img>		Please Wait... 
		</div>  
	</div>  
	
	<!-- Modal Add Image -->
	<div id="add_image" class="modal hide fade in" style="display: none;">
		<div class="modal-body">
			<div class="fileupload fileupload-new" data-provides="fileupload">
				<table>
					<td>
				<div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;"></div>
				</td>
				<td>
				<label>File Type</label>
				<label>File Size</label>
				<div>
					<span class="btn btn-file">
					<span class="fileupload-new">Select image</span>
					<span class="fileupload-exists">Change</span>
						<input type="file"  id="img-thumb" />
					</span>
				<!--<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>-->
				</div>
				</td>
				</table>
			</div>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
			<button class="btn btn-primary" onclick="saveImage()">Save changes</button>
		</div>
	</div>

	<div class="row bg-blue-grad">
		<div class="span2">
			<img src="<?= base_url();?>assets/img/logo.png"></img>
		</div>
		<div class="span10">
			<div class="row">
				<a onclick="showDialogAndinitGroupForCreation()"><img src="<?= base_url();?>assets/img/icon_new.png"></img></a>
				<img src="<?= base_url();?>assets/img/icon_folder.png"></img>
				<img src="<?= base_url();?>assets/img/icon_save.png"></img>
				<img src="<?= base_url();?>assets/img/icon_print.png"></img>
				<img src="<?= base_url();?>assets/img/icon_unknown.png"></img>
			</div>
			<div class="row hidden-phone">
					<div id="text1_container">
						
					</div>
					<div id="text2_container">
						<img src="<?= base_url();?>assets/img/icon_text.png"></img>
						<img src="<?= base_url();?>assets/img/icon_undo.png"></img>
						<img src="<?= base_url();?>assets/img/icon_redo.png"></img>
						<img src="<?= base_url();?>assets/img/icon_grab.png"></img>
						<img src="<?= base_url();?>assets/img/icon_zoom.png"></img>
					</div>

			</div>
		</div>
	</div>
	<div class="row">
		<!-- Left Pane -->
		<div class="span2 hidden-phone">
			<table class="table">
				<tr class="warning">
					<td>
						<a data-color="#000" href="#sketch_canvas"><img src="<?= base_url();?>assets/img/pallete_black.png"></img></a>
						<a data-color="#f00" href="#sketch_canvas"><img src="<?= base_url();?>assets/img/pallete_red.png"></img></a>
						<a data-color="#00f" href="#sketch_canvas"><img src="<?= base_url();?>assets/img/pallete_blue.png"></img></a>
						<a data-color="#0f0" href="#sketch_canvas"><img src="<?= base_url();?>assets/img/pallete_green.png"></img></a>
						<a data-color="#ff0" href="#sketch_canvas"><img src="<?= base_url();?>assets/img/pallete_yellow.png"></img></a>
						<a data-color="#0ff" href="#sketch_canvas"><img src="<?= base_url();?>assets/img/pallete_cyan.png"></img></a>
						<a data-color="#f0f" href="#sketch_canvas"><img src="<?= base_url();?>assets/img/pallete_purple.png"></img></a>
					</td>
				</tr>
				<tr class="success">
					<td>
						<img src="<?= base_url();?>assets/img/icon_pencil.png"></img>
						<img src="<?= base_url();?>assets/img/icon_pencil_straight.png"></img>
						<img src="<?= base_url();?>assets/img/icon_pen.png"></img>
						<img src="<?= base_url();?>assets/img/icon_pen_straight.png"></img>
						<img src="<?= base_url();?>assets/img/slider_line.png"></img>
					</td>
				</tr>
				<tr class="info">
					<td>
						<img src="<?= base_url();?>assets/img/icon_text_down.png"></img>
						<img src="<?= base_url();?>assets/img/icon_text_left.png"></img>
						<img src="<?= base_url();?>assets/img/slider_line.png"></img>
						<div class="btn-group">
							<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
							Select Style
							<span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li><a>Style 1</a></li>
								<li><a>Style 2</a></li>
								<li><a>Style 3</a></li>
								<li><a>Style 4</a></li>
							</ul>
						</div>
					</td>
				</tr>
				<tr class="error">
					<td>
						<img src="<?= base_url();?>assets/img/icon_stamp.png"></img>
						<a href="#add_image" role="button" class="btn" data-toggle="modal" data-backdrop="true" data-keyboard="true"><img src="<?= base_url();?>assets/img/icon_insert_image.png"></img></a>
						<img src="<?= base_url();?>assets/img/icon_attachment.png"></img>
					</td>
				</tr>
				<tr class="warning">
					<td>
						<img src="<?= base_url();?>assets/img/icon_select.png"></img>
						<img src="<?= base_url();?>assets/img/icon_copy.png"></img>
						<img src="<?= base_url();?>assets/img/icon_eraser.png"></img>
					</td>
				</tr>
			</table>
		</div>
		<!--Drawing Container -->
		<div class="span10">
			<div id="canvas_drawing"></div>
			<div id="canvas_edit"></div>
			<div id="canvas_save"></div>
		</div>
	</div>
	
</div>
</body>
</html>